<template>
    <div class="permission">
      <div class="table-wrapper">
        <Table :loading="loading" size="small" highlight-row stripe :columns="tableColumns" :data="tableData">
          <template slot-scope="{ row }" slot="userName">
            <Input v-model="row.userName" placeholder="请填写信息..." class="w100" @on-enter="updateUserMessage(row, 'userName')" />
          </template>
          <template slot-scope="{ row }" slot="passWord">
            <Input v-model="row.passWord" placeholder="请填写信息..."  class="w100" @on-enter="updateUserMessage(row, 'passWord')" />
          </template>
          <template slot-scope="{ row }" slot="age">
            <Input v-model="row.age" placeholder="请填写信息..."  class="w100" @on-enter="updateUserMessage(row, 'age')" />
          </template>
          <template slot-scope="{ row }" slot="tel">
            <Input v-model="row.tel" placeholder="请填写信息..."  class="w100" @on-enter="updateUserMessage(row, 'tel')" />
          </template>
          <template slot-scope="{ row }" slot="email">
            <Input v-model="row.email" placeholder="请填写信息..." class="w100"  @on-enter="updateUserMessage(row, 'email')" />
          </template>
          <template slot-scope="{ row }" slot="access">
            <Select class="w100"
                    multiple
                    :max-tag-count="1"
                    v-model="row.access"
                    @on-change="selectedChange(row)"
                    @on-open-change="selectedEndChange">
              <Option v-for="(item,key) in accessList"
                      :value="item.value"
                      :key="key">{{ item.name }}</Option>
            </Select>
          </template>
        </Table>
      </div>
      <Page size="small"
            :total="meta.total"
            :page-size="meta.limitPage"
            :page-size-opts="meta.limitArray"
            show-elevator show-sizer show-total
            @on-page-size-change="sizeChange"
            @on-change="changePage"/>
    </div>
</template>
<script>
import { UserList, AccessList, UpdateUser } from '@/axios/api';

export default {
    name: 'permission',
    data() {
        return {
            tableColumns: [],
            tableData: [],
            accessList: [],
            loading: false,
            meta: {
                skipPage: 1,
                limitPage: 20,
                limitArray: [20, 30, 40],
                total: 1,
            },
            userInfo: {},
        };
    },
    async created() {
        await this.getData();
        this.getAccessList();
    },
    // 刷新组件
    activated() {
        this.getData();
    },
    methods: {
        // 跨页
        sizeChange(val) {
            this.meta.limitPage = val;
            this.getData();
        },
        // 翻页
        changePage(val) {
            this.meta.skipPage = val;
            this.getData();
        },
        async updateUserMessage(row, updateValue) {
            const param = {
                id: row._id,
            };
            param[updateValue] = row[updateValue];
            if (!param[updateValue]) return;
            const { data: { success, result } } = await UpdateUser().stream({
                method: 'post',
                params: param,
            });
            if (success) {
                // this.getData();
            } else {
                this.$Message.error(result);
            }
        },
        selectedChange(row) {
            this.userInfo = {
                _id: row._id,
                access: row.access,
            };
        },
        selectedEndChange(value) {
            if (!value) {
                this.updateUserMessage(this.userInfo, 'access');
            }
        },
        // 获取权限列表
        async getAccessList() {
            this.loading = true;
            const { data: { success, result } } = await AccessList().stream({
                method: 'get',
                option: {
                    isCache: true,
                },
            });
            if (success) {
                this.accessList = result.accessList;
            } else {
                this.$Message.error(result);
            }
            this.loading = false;
        },
        async getData() {
            this.loading = true;
            const { data: { success, result } } = await UserList().stream({
                params: {
                    limit: this.meta.limitPage,
                    skip: (this.meta.skipPage - 1) * this.meta.limitPage,
                },
            });
            if (success) {
                this.tableColumns = result.tableColumns;
                this.meta.total = result.total;
                this.$nextTick(() => {
                    this.tableData = result.tableData;
                });
            } else {
                this.$Message.error(result);
            }
            this.loading = false;
        },
    },
};
</script>
<style lang="less" scoped>
.permission {
  height: calc(100% - 42px);
  overflow: auto;
  .table-wrapper{
    height: calc(100% - 36px);
    overflow: auto;
  }
}
</style>
<style lang="less">
.table-wrapper{
  .ivu-table-wrapper{
    height: 100%;
  }
  .ivu-table-body{
    height: calc(100% - 32px);
    overflow: auto;
  }
}
</style>
